﻿@using DevExtreme.NETCore.Demos.Models

@(Html.DevExtreme().PivotGrid<Sale>()
    .ID("sales")
    .DataFieldArea(PivotGridDataFieldArea.Column)
    .RowHeaderLayout(PivotGridRowHeadersLayout.Tree)
    .WordWrapEnabled(false)
    .ShowBorders(true)
    .Height(440)
    .DataSource(d => d
        .Store(s => s.Mvc().Controller("PivotGridData").LoadAction("Get"))
        .Fields(fields => {
            fields.AddFor(m => m.Region)
                .Expanded(true)
                .Area(PivotGridArea.Row);

            fields.AddFor(m => m.Country)
                .Expanded(true)
                .Area(PivotGridArea.Row);

            fields.AddFor(m => m.City)
                .Area(PivotGridArea.Row);

            fields.AddFor(m => m.Date)
                .Area(PivotGridArea.Column);

            fields.AddFor(m => m.Amount)
                .Caption("Sales")
                .SummaryType(SummaryType.Sum)
                .Format(Format.Currency)
                .Area(PivotGridArea.Data);

            fields.AddFor(m => m.Amount)
                .Caption("Percent")
                .SummaryType(SummaryType.Sum)
                .SummaryDisplayMode(PivotGridSummaryDisplayMode.PercentOfRowGrandTotal)
                .Area(PivotGridArea.Data);
        })
    )
    .FieldChooser(c => c.Height(500))
)

<div class="options">
    <div class="caption">Options</div>
    <div class="option">
        @(Html.DevExtreme().CheckBox()
            .Text("Show Totals Prior")
            .Value(false)
            .OnValueChanged(@<text>
                function(data) {
                    getPivotGridInstance().option("showTotalsPrior", data.value ? "both" : "none");
                }
            </text>)
        )
    </div>
    <div class="option">
        @(Html.DevExtreme().CheckBox()
            .Text("Data Field Headers in Rows")
            .Value(false)
            .OnValueChanged(@<text>
                function(data) {
                    getPivotGridInstance().option("dataFieldArea", data.value ? "row" : "column");
                }
            </text>)
        )
    </div>
    <div class="option">
        @(Html.DevExtreme().CheckBox()
            .Text("Tree Row Header Layout")
            .Value(true)
            .OnValueChanged(@<text>
                function(data) {
                    getPivotGridInstance().option("rowHeaderLayout", data.value ? "tree" : "standard");
                }
            </text>)
        )
    </div>
</div>

<script>
    function getPivotGridInstance() {
        return $("#sales").dxPivotGrid("instance");
    }
</script>
